<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>

<head>


    <title>产品展示</title>

    <link rel="stylesheet" type="text/css" th:href="@{css/imgstyle.css}">
    <script th:src="@{https://kit.fontawesome.com/a81368914c.js}"></script>
</head>
<div class="container">
    <div class="background">
        <img  th:src="@{img/1.jpg}" class="bg">
        <img th:src="@{img/2.jpg}" class="bg">
        <img th:src="@{img/3.jpg}" class="bg">
        <img th:src="@{img/4.jpg}" class="bg">
        <img th:src="@{img/5.jpg}" class="bg">
    </div>

    <div class="slider-container">
        <div>
            <div>
                <div class="slider">
                    <div class="img" id="first">
                        <img th:src="@{img/1.jpg}">
                    </div>
                    <div class="img">
                        <img th:src="@{img/2.jpg}">
                    </div>
                    <div class="img">
                        <img th:src="@{img/3.jpg}">
                    </div>
                    <div class="img">
                        <img th:src="@{img/4.jpg}">
                    </div>
                    <div class="img">
                        <img th:src="@{img/5.jpg}">
                    </div>
                    <div class="img">
                        <img th:src="@{img/1.jpg}">
                    </div>
                    <div class="img" id="last">
                        <img th:src="@{img/2.jpg}">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="content">
        <button class="btn" id="prev"><i class="fas fa-chevron-left"></i></button>
        <button class="btn" id="next"><i class="fas fa-chevron-right"></i></button>
        <ul>
            <li class="option" op-index="0"></li>
            <li class="option" op-index="1"></li>
            <li class="option" op-index="2"></li>
            <li class="option" op-index="3"></li>
            <li class="option" op-index="4"></li>
        </ul>
    </div>
</div>
<script type="text/javascript" th:src="@{js/imgmain.js}"></script>
<a th:href="@{/tomain}"><button class="btn btn-sm btn-primary" >返回</button></a>




</body>

</html>